import * as React from 'react';
import { IStackTokens, Stack, ThemeProvider, initializeIcons, Dropdown, DropdownMenuItemType, IDropdownOption, IDropdownProps, SearchBox, ISelectableOption, IDropdownStyles, ResponsiveMode } from "@fluentui/react";
import { IInputs } from "./generated/ManifestTypes";
import * as ReactDOM from 'react-dom';

export interface DropdownData {
    onChange: (newValue: IDropdownOption<any> | undefined) => void;
}



const sampleDropdown: React.FC<{ context: ComponentFramework.Context<IInputs>, dropdowndata: DropdownData }> = ({ context, dropdowndata }) => {

    const dropdownStyles: Partial<IDropdownStyles> = {
        dropdown: { width: 300 },
    };

    const options: IDropdownOption[] = [
        { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
        { key: 'apple', text: 'Apple' },
        { key: 'banana', text: 'Banana' },
        { key: 'orange', text: 'Orange', disabled: true },
        { key: 'grape', text: 'Grape' },
        { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
        { key: 'vegetablesHeader', text: 'Vegetables', itemType: DropdownMenuItemType.Header },
        { key: 'broccoli', text: 'Broccoli' },
        { key: 'carrot', text: 'Carrot' },
        { key: 'lettuce', text: 'Lettuce' },
    ];

    const stackTokens: IStackTokens = { childrenGap: 20 };

    const onChange = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption<any> | undefined, index?: number | undefined): void => {
        if (item) {
            dropdowndata.onChange(item);
        }
    }

    return (
        <Stack tokens={stackTokens}>
            <Dropdown
                placeholder="---"
                options={options}
                styles={dropdownStyles}
                onChange={onChange}
            />
        </Stack>
    )
}

export async function Init(context: ComponentFramework.Context<IInputs>, container: HTMLDivElement, onChange: (newValue: IDropdownOption<any> | undefined) => void) {

    const dropdownData: DropdownData = {
        onChange: onChange
    }

    ReactDOM.render((React.createElement(sampleDropdown, { context: context, dropdowndata: dropdownData })), container)
}




